<template>
    <view class="bg-[#F8F8F8]">
        <view class="mx-[26rpx] flex items-center py-[22rpx]">
            <u-search bgColor="#fff" :showAction="false" placeholder="搜索课程" v-model="course"></u-search>

            <view @click="navigateTo('/pages/screen/screen')" class="ml-2 flex items-center">筛选<u-icon name="arrow-right" color="#575B66" size="13"></u-icon></view>
        </view>
        <view class="bg-[#fff]">
            <view class="mx-[34rpx] text-[30rpx] flex justify-between py-[23rpx]">
                <view>全部</view>
                <view class="flex items-center">
                    <view class="flex items-center mr-[61rpx]">价格<view class="flex flex-col ml-1"><u-icon
                                name="arrow-up" color="#333333" size="8"></u-icon><u-icon name="arrow-down"
                                color="#333333" size="8"></u-icon></view>
                    </view>
                    <view class="flex items-center mr-[61rpx]">时间<view class="flex flex-col ml-1"><u-icon
                                name="arrow-up" color="#333333" size="8"></u-icon><u-icon name="arrow-down"
                                color="#333333" size="8"></u-icon></view>
                    </view>
                    <view class="flex items-center mr-1">距离<view class="flex flex-col ml-1"><u-icon name="arrow-up"
                                color="#333333" size="8"></u-icon><u-icon name="arrow-down" color="#333333"
                                size="8"></u-icon></view>
                    </view>
                </view>
            </view>
            <view v-for="(item, index) in 3" :key="index"
                class="mt-[16rpx] shadow ml-[12rpx] mr-[18rpx] bg-white pl-[30rpx] pr-[10rpx] pt-[20rpx]">
                <view class="text-[#3D3D3D]  mb-[12rpx] flex justify-between items-end"><text
                        class="text-[32rpx]">风祥小区教学点</text><text class="text-[28rpx] ">3.8km</text>
                </view>
                <view class="flex pb-[26rpx]">
                    <image class="w-[200rpx] h-[200rpx]"
                        src="https://gangantao.com/image/20241216/da0e780c-e279-4d0e-be12-9ab9486ffaf7.png"></image>
                    <view class="ml-[16rpx] flex-1 flex flex-col justify-between h-[200rpx]">
                        <view class="flex items-start justify-between w-full">
                            <view class="flex items-start">
                                <view
                                    class=" text-white text-[28rpx] bg-[#FD755D] rounded px-1  mr-[12rpx] tracking-wider">
                                    一级学院</view>
                                <view class=" text-white text-[28rpx] bg-[#FD755D] rounded px-1">二级学院</view>
                            </view>
                            <view class="text-[#FF0000] text-[44rpx]">0元</view>
                        </view>
                        <view class="text-[32rpx] text-[#3D3D3D]">楷书毛笔字课程</view>
                        <view class="text-[28rpx] text-[#3D3D3D] ">2024.10.10</view>
                        <view class="flex items-end justify-between">
                            <view class="flex">
                                <view class=" text-white text-[28rpx] bg-[#FFA812] rounded px-1 mr-[12rpx]">免费</view>
                                <view class=" text-white text-[28rpx] bg-[#FFA812] rounded px-1 mr-[12rpx]">社区</view>
                                <view class=" text-white text-[28rpx] bg-[#FFA812] rounded px-1">艺术</view>
                            </view>

                            <view class=" text-white py-[10rpx] px-4 bg-[#FD755D] rounded  text-[32rpx]">报名</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>

</template>
<script setup>
import { ref, reactive } from "vue";
const navigateTo =(url)=>{
  uni.navigateTo({
    url
  })
}
</script>
<style></style>